<template>
	<view class="orderGoods">
		<view class='total' v-if="is_gift"><text>
				<text class="iconfont icon-ic_gift1 mr-8"></text>
				<text>{{ is_gift== 1 ? '送给好友' : '我的礼物'}}</text>
			</text>
		</view>
		<view class='total' v-else-if="is_behalf"><text>
				{{$t(`代付金额`)}}：
				<text class="pay-price">￥{{pay_price || 0}}</text>
			</text>
		</view>
		<view class='total' v-else-if="!split && !is_behalf">{{$t(`共`)}}{{totalNmu}}{{$t(`件商品`)}}</view>


		<view class='goodWrapper'>
			<view class='' :class="{op:!item.is_valid}" v-for="(item,index) in cartInfo" :key="index"
				@click="jumpCon(item)">
				<block>
					<view class="item acea-row row-between-wrapper">
						<view class='pictrue' :class="{gray:!item.is_valid}">
							<image :src='item.productInfo.attrInfo.image' v-if="item.productInfo.attrInfo"></image>
							<image :src='item.productInfo.image' v-else></image>
						</view>
						<view class='text'>
							<view class='acea-row row-between-wrapper' style="align-items: flex-start;">
								<view class='name line1' :style="item.is_trade_in?'':'width: 320rpx;'">
									{{item.productInfo.store_name}}</view>
								<view class="gold_price" v-if="item.productInfo.price_type!=0">
									金价：<text v-if="item.productInfo.price_type==1">{{realTimePriceData.price_sale||0}}</text>
									<text v-else-if="item.productInfo.price_type==2">{{realTimePriceData.price_sale_birkin||0}}</text>
									<text v-else-if="item.productInfo.price_type==3">{{realTimePriceData.price_sale_silver||0}}</text>
								</view>
							</view>
							<!-- <view class='acea-row row-between-wrapper'>
								<view class='name line2'>{{item.productInfo.store_name}}</view>
								<view class='num'>x {{item.cart_num}}</view>
							</view> -->
							<!-- <view class='attr line1' v-if="item.productInfo.attrInfo">{{item.productInfo.attrInfo.suk}}
							</view> -->
							<view class='attr flex_sb' v-if="item.productInfo.attrInfo" style="margin-top: 15rpx;">
								<view class="flex_s" style="flex-grow: 1;">
									<view class="price_item flex_sb" v-if="Number(item.productInfo.attrInfo.weight)">
										克重:<text>约{{item.productInfo.attrInfo.weight}}克</text>
										<view class='num' v-if="pageType=='cart'">x {{item.cart_num}}</view>
									</view>
									<view class="price_item"
										v-if="(pageType=='order'||pageType=='confirm')&&Number(item.productInfo.attrInfo.labor_costs)">
										<view>工费:<text>{{item.productInfo.attrInfo.labor_costs}}/{{item.productInfo.attrInfo.labor_costs_unit_text}}</text></view>
									</view>
									<view class="price_item"
										v-if="(pageType=='order'||pageType=='confirm')&&Number(item.productInfo.attrInfo.attach_labor_costs)">
										<view>附加工费:<text>{{item.productInfo.attrInfo.attach_labor_costs}}/{{item.productInfo.attrInfo.attach_labor_costs_unit_text}}</text></view>
									</view>
								</view>
					
								
							</view>
							<view class='money font-color pic' v-if="item.productInfo.attrInfo">
								<view class="flex_sb" style="flex: 1;">
									<template v-if="pageName=='orderConfirm'">
										<text :class="{gray:!item.is_valid}" style="color: rgba(0, 0, 0, 1);font-size: 30rpx;" v-if="item.productInfo.price_type!=0">
											{{$t(`￥`)}}{{ truePriceHandler(item.productInfo.price_type,item.productInfo.attrInfo.weight,item.productInfo.attrInfo.labor_costs,item.productInfo.attrInfo.labor_costs_unit,item.productInfo.attrInfo.attach_labor_costs,item.productInfo.attrInfo.attach_labor_costs_unit) }}
										</text>
										<text :class="{gray:!item.is_valid}" style="color: rgba(0, 0, 0, 1);font-size: 30rpx;" v-else>
											{{$t(`￥`)}}{{item.productInfo.attrInfo.price}}
										</text>
									</template>
									
									<text :class="{gray:!item.is_valid}" style="color: rgba(0, 0, 0, 1);font-size: 30rpx;" v-else>
										{{$t(`￥`)}}{{item.productInfo.attrInfo.price}}
									</text>
									<text v-if="pageType=='confirm'&&news==1" style="color: #282828;font-size: 24rpx;">数量 x {{item.cart_num}}</text>
								</view>
								<!-- <text v-show="is_gift != 2" :class="{gray:!item.is_valid}">
									{{$t(`￥`)}}{{item.productInfo.attrInfo.price}}
								</text> -->
								<view class="refund" v-if="item.refund_num && statusType !=-2">
									{{item.refund_num}}{{$t(`件退款中`)}}
								</view>
								<text class="valid" v-if="!item.is_valid && shipping_type === 0">{{$t(`不支持配送`)}}</text>
								<text class="valid"
									v-if="!item.productInfo.store_mention && shipping_type === 1">{{$t(`不支持自提`)}}</text>
							</view>
							<view class='money font-color pic' v-else>
								<text :class="{gray:!item.is_valid}">{{$t(`￥`)}}{{item.productInfo.price}}</text>
								<text class="valid" v-if="!item.is_valid && shipping_type === 0">{{$t(`仅支持到店`)}}</text>
								<text class="valid"
									v-if="!item.productInfo.store_mention && shipping_type === 1">{{$t(`仅支持配送`)}}</text>
							</view>
							<view class='evaluate' v-else-if="item.is_reply==1">{{$t(`已评价`)}}</view>
						</view>
					
					</view>
					<view class="btm_box flex_sb" v-if="pageType=='confirm'&&news==0">
						<view class="count_num">
							<text>数量</text>
						</view>
						<view class="cart_box flex_s">
							<view class="mysicle reduce acea-row row-center-wrapper" :class="item.numSub ? 'on' : ''"
								@click.stop='subCart(index)'>
								<text class="iconfont icon-shangpinshuliang-jian"></text>
							</view>
							<view class=' num acea-row row-middle'>
								<input type="number" v-model="item.cart_num" data-name="productSelect.cart_num"
									@input="iptCartNum(index)" @blur="blurInput(index)"></input>
							</view>
					
							<view class=" mysicle plus acea-row row-center-wrapper" :class="item.numAdd ? 'on' : ''"
								@click.stop='addCart(index)'>
								<text class="iconfont icon-shangpinshuliang-jia"></text>
							</view>
						</view>
					</view>
					<view class="botton-btn">
						<view class='logistics' v-if="item.is_reply==0 && evaluate==3 && pid != -1 && isShow"
							@click.stop="evaluateTap(item.unique,orderId)">
							{{$t(`评价`)}}
						</view>
						<!-- <view class='logistics'
							v-if="paid === 1 && refund_status === 0 && item.refund_num !=item.cart_num && !is_confirm && is_refund_available && isShow && (virtualType == 0 || (virtualType > 0 && statusType == 1)) && (is_gift != 2) && gift_uid == 0"
							@click.stop="openSubcribe(item)">
							{{$t(`申请退款`)}}
						</view> -->
						<view class="rig-btn" v-if="status_type === 2 && index === cartInfo.length - 1 || !split">
							<view v-if="delivery_type === 'express'" class="logistics" @click.stop="logistics(orderId)">
								{{$t(`查看物流`)}}
							</view>
							<view class="logistics sure" v-if="status_type === 2" @click.stop="confirmOrder(orderId)">
								{{$t(`确认收货`)}}
							</view>
						</view>
					</view>
				</block>
				<!-- 退差订单明细数据 -->
				<view class="difference_box flex_sa" v-if="is_refund_weight==1">
					<view class="dif_item">
						<view class="text1">
							发货克重
						</view>
						<view class="text2">
							{{item.refund_weight_json.actual_weight||0}}克
						</view>
					</view>
					<view class="dif_item">
						<view class="text1">
							误差克重
						</view>
						<view class="text2">
							{{item.refund_weight_json.weight_num||0}}克
						</view>
					</view>
					<view class="dif_item">
						<view class="text1">
							退款工费
						</view>
						<view class="text2">
							{{item.refund_weight_json.refund_total_labor_costs||0}}
						</view>
					</view>
					<view class="dif_item">
						<view class="text1">
							克重退款
						</view>
						<view class="text2">
							{{item.refund_weight_json.refund_sub_price||0}}
						</view>
					</view>
					<view class="dif_item">
						<view class="text1">
							总退差
						</view>
						<view class="text2">
							{{item.refund_weight_json.refund_weight_price||0}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getCartCounts,
		changeCartNum
	} from "@/api/order.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: mapGetters(['uid',"realTimePriceData"]),
		props: {
			is_refund_weight:{
				type:Number|String,
				default:0
			},
			pageName:{
				type:String,
				default:''
			},
			// 订单状态
			statusType: {
				type: Number,
				default: 0,
			},
			virtualType: {
				type: Number,
				default: 0,
			},
			evaluate: {
				type: Number,
				default: 0,
			},
			oid: {
				type: Number,
				default: 0,
			},
			// 1已支付 0未支付
			paid: {
				type: Number,
				default: 0,
			},
			cartInfo: {
				type: Array,
				default: function() {
					return [];
				}
			},
			orderId: {
				type: String,
				default: '',
			},
			shipping_type: {
				type: Number,
				default: -1,
			},
			delivery_type: {
				type: String,
				default: '',
			},
			pay_price: {
				type: String,
				default: '',
			},
			jump: {
				type: Boolean,
				default: false,
			},
			is_confirm: {
				type: Boolean,
				default: false,
			},
			// is_behalf 是否是代付列表
			is_behalf: {
				type: Boolean,
				default: false,
			},
			split: {
				type: Boolean,
				default: false,
			},
			jumpDetail: {
				type: Boolean,
				default: false,
			},
			index: {
				type: Number,
				default: 0,
			},
			pid: {
				type: Number,
				default: 0,
			},
			is_gift: {
				type: Number | String,
				default: 0,
			},
			gift_uid: {
				type: Number,
				default: 0,
			},
			refund_status: {
				type: Number,
				default: 0,
			},
			status_type: {
				type: Number,
				default: 0,
			},
			isShow: {
				type: Boolean,
				default: true,
			},
			is_refund_available: {
				type: Boolean,
				default: true,
			},
			pageType: {
				type: String,
				default: 'cart'
			},
			news: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				totalNmu: 0,
				operationModel: false,
				status: "",
			};
		},
		watch: {
			cartInfo: function(nVal, oVal) {
				let num = 0
				nVal.forEach((item, index) => {
					num += item.cart_num
				})
				this.totalNmu = num
			}
		},
		mounted() {
			let num = 0
			this.$nextTick(() => {
				this.cartInfo.forEach((item, index) => {
					num += item.cart_num
				})
				this.$set(this, 'totalNmu', num)
			})
			setTimeout(()=>{
				console.log(this.is_refund_weight,"是否为退差订单");
			},3000)

		},
		methods: {
			/**
			 * 计算根据每件商品的单价（实现实时变动）
			 * @param {*} price_type 判断商品是普通商品还是实时金价的商品
			 * @param {*} weight 每件商品的克重
			 * @param {*} labor_costs 工费
			 * @param {*} labor_costs 工费单位(1=按克重,2=按件)
			 * @param {*} attach_labor_costs 附加工费
			 * @param {*} attach_labor_costs_unit 附加工费单位(1=按克重,2=按件)
			 * 
			 */
			truePriceHandler(price_type, weight, labor_costs,labor_costs_unit, attach_labor_costs, attach_labor_costs_unit) {
				let that = this
				let truePrice = 0 //商品单价
				let goldPrice = 0 //实时金价
				let laborCostTotal = 0 //没件商品的总工费
				let attachLaborCostTotal = 0 //没件商品的总附加工费
			
				// 根据金价计算的商品
				// 根据黄金类型不同 1黄金实时 2铂金实时 3白银实时得出不同的金价
				if (price_type == 1) {
					goldPrice = this.realTimePriceData.price_sale
				} else if (price_type == 2) {
					goldPrice = this.realTimePriceData.price_sale_birkin //铂金金价
				} else if(price_type == 3){
					goldPrice = this.realTimePriceData.price_sale_silver //白银金价
				}else{
					goldPrice = this.realTimePriceData.price_sale_silver
				}
				// 根据不同的售卖方式计算工费和附加工费
				if (labor_costs_unit == 1) {
					// 按克重计算工费/附加工费（工费=工费*克重）
					laborCostTotal = that.$util.$h.Mul(labor_costs, weight)
			
				} else {
					// 按件计算工费（直接取工费即可）
					laborCostTotal = labor_costs
				}
				console.log(labor_costs, weight,"工费和克重-------");
				// 根据不同的售卖方式计算工费和附加工费
				if (attach_labor_costs_unit == 1) {
					// 按克重计算工费/附加工费（工费=工费*克重）
					attachLaborCostTotal = that.$util.$h.Mul(attach_labor_costs, weight)
			
				} else {
					// 按件计算工费（直接取工费即可）
					attachLaborCostTotal = attach_labor_costs
				}
				console.log(attach_labor_costs, weight,"附加工费和克重-------");
				console.log(that.$util.$h.Mul(goldPrice, weight),laborCostTotal,attachLaborCostTotal,"金价-总工费-附加总工费");
				truePrice = Number(that.$util.$h.Mul(goldPrice, weight)) + Number(laborCostTotal) + Number(attachLaborCostTotal) //商品单价
			
			
				return truePrice
			},
			subCart: function(index) {
				let that = this;
				let status = false;
				let item = that.cartInfo[index];
				item.cart_num = Number(item.cart_num) - 1;
				if (item.cart_num < 1) status = true;
				if (item.cart_num <= 1) {
					item.cart_num = 1;
					item.numSub = true;
				} else {
					item.numSub = false;
					item.numAdd = false;
				}
				if (false == status) {
					that.setCartNum(item.id, item.cart_num, function(data) {
						that.cartInfo[index] = item;
						that.getCartNum();
					}, () => {
						item.cart_num = Number(item.cart_num) + 1
					})
				}
			},
			addCart: function(index) {
				let that = this;
				if (this.adding) return
				let item = that.cartInfo[index];
				item.cart_num = Number(item.cart_num) + 1
				let productInfo = item.productInfo;
				if (productInfo.hasOwnProperty('attrInfo') && item.cart_num >= item.productInfo.attrInfo.stock) {
					item.cart_num = item.productInfo.attrInfo.stock;
					item.numAdd = true;
					item.numSub = false;
				} else {
					item.numAdd = false;
					item.numSub = false;
				}
				that.setCartNum(item.id, item.cart_num, (data) => {
					that.cartInfo[index] = item;
					that.getCartNum();
				}, () => {
					item.cart_num = Number(item.cart_num) - 1
				})
			},
			setCartNum(cartId, cartNum, successCallback, errorCallback) {
				let that = this;
				changeCartNum(cartId, cartNum).then(res => {
					successCallback && successCallback(res.data);
				}).catch(err => {
					errorCallback && errorCallback()
					return that.$util.Tips({
						title: err
					});
				})
			},
			changeHandle(name, index) {
				const data = {
					name: name,
					index: index
				}
				this.$emit('changeCart')
			},
			getCartNum: function() {
				let that = this;
				const params={sales_method:this.$Cache.get('sales_method')||1}
				getCartCounts(params).then(res => {
					that.cartCount = res.data.count;
					this.adding = false
					this.$store.commit('indexData/setCartNum', res.data.count > 99 ? '..' : res.data.count)
					this.changeHandle()
					if (res.data.count > 0) {
						wx.setTabBarBadge({
							index: 2,
							text: res.data.count + ''
						})
					} else {
						wx.hideTabBarRedDot({
							index: 2
						})
					}

				});
			},
			evaluateTap: function(unique, orderId) {
				uni.navigateTo({
					url: "/pages/goods/goods_comment_con/index?unique=" + unique + "&uni=" + orderId
				})
			},
			jumpCon(item) {
				if (this.jump) {
					let url = '';
					if (item.type == 0) {
						url = `/pages/goods_details/index?id=${item.product_id}`
					} else if (item.type == 1) {
						url = `/pages/activity/goods_seckill_details/index?id=${item.seckill_id}`
					} else if (item.type == 2) {
						url = `/pages/activity/goods_bargain_details/index?id=${item.bargain_id}&bargain=${this.uid}`
					} else if (item.type == 3) {
						url = `/pages/activity/goods_combination_details/index?id=${item.combination_id}`
					}
					uni.navigateTo({
						url
					})
				} else if (this.jumpDetail) {
					uni.navigateTo({
						url: `/pages/goods/order_details/index?order_id=${this.orderId}`
					})
				}
			},
			logistics(order_id) {
				uni.navigateTo({
					url: '/pages/goods/goods_logistics/index?orderId=' + order_id
				})
			},
			confirmOrder(orderId) {
				this.$emit('confirmOrder', orderId)
			},
			changeOperation() {
				this.operationModel = !this.operationModel
			},
			openSubcribe(item) {
				let cartList = [];
				cartList.push({
					cart_id: item.id,
					cart_num: item.surplus_refund_num
				})
				let obj = JSON.stringify(cartList);
				this.$emit('openSubcribe',
					`/pages/goods/goods_return/index?orderId=${this.orderId}&id=${this.oid}&cartIds=${obj}`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.difference_box{
		width: 684rpx;
		margin: 0 auto;
		border-radius: 8rpx;
		background: #F6F6F6;
		padding: 15rpx 0;
		.dif_item{
			text-align: center;
			font-size: 24rpx;
			.text1{
				color: #737272;
				margin-bottom: 10rpx;
			}
			.text2{
				color: #E01005;
			}
		}
	}
	.price_item {
		font-size: 24rpx;
		color: #737272;
		// margin-right: 15rpx;
		// font-weight: 550;
		&:not(:last-child){
			margin-right: 20rpx;
		}
		text {
			color: #E63523;
		}
	
		.num {
			color: #171616;
			font-size: 28rpx;
			margin-left: 17rpx;
		}
	
	}
	.gold_price {
		border-radius: 8rpx;
		padding: 0 27rpx;
		color: #383838;
		font-size: 24rpx;
		height: 38rpx;
		line-height: 38rpx;
		background: var(--view-linear2);
	}

	.btm_box {
		margin-top: 10rpx;
		padding: 0 30rpx;

		.count_num {
			font-size: 28rpx;
			color: #2B2B32
		}

		.cart_box {
			height: 54rpx;

			.stock {
				font-size: 20rpx;
				line-height: 54rpx;
				color: #aaa;
			}

			.line {
				padding: 0 6rpx;
			}

			.iconfont {
				font-size: 20rpx;
			}

			view {
				// border: 1px solid #a4a4a4;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				// line-height: 54rpx;
				color: #282828;
				font-size: 45rpx;
			}

			.mysicle {
				border-radius: 50% !important;
				border: 2rpx solid var(--view-theme);
				overflow: hidden;

				.iconfont {
					color: var(--view-theme);
				}

			}

			.reduce {
				border-radius: 6rpx 0 0 6rpx;
				// line-height: 48rpx;
				font-size: 60rpx;

			}

			.reduce.on {
				// border-color: #e3e3e3;
				border: 2rpx solid #e3e3e3;
				color: #DEDEDE !important;

				.iconfont {
					color: #DEDEDE !important;
				}
			}

			.plus {
				border-radius: 0 6rpx 6rpx 0;
				// line-height: 46rpx;
			}

			.plus.on {
				// border-color: #e3e3e3;
				border: 2rpx solid #e3e3e3;
				color: #dedede !important;

				.iconfont {
					color: #DEDEDE !important;
				}
			}

			.num {
				background: #F6F6F6;
				color: #282828;
				font-size: 28rpx;
				margin: 0 20rpx;
				width: 90rpx;
				border-radius: 4rpx;
				height: 52rpx;
				line-height: 52rpx;
			}
		}
	}

	.fontcolor {
		color: #e93323;
	}

	.orderGoods {
		background-color: #fff;
	}

	.orderGoods .total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		// height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #333;
		line-height: 86rpx;
		box-sizing: border-box;
	}

	.botton-btn {
		display: flex;
		align-items: right;
		justify-content: flex-end;
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.rig-btn {
		display: flex;
		align-items: center;

		.refund {
			font-size: 26rpx;
			color: #e93323;
		}

		.done {
			font-size: 26rpx;
			color: #F19D2F;
		}
	}

	.logistics {
		// height: 46rpx;
		line-height: 30rpx;
		color: #666666;
		font-size: 20rpx;
		border: 1px solid #CCCCCC;
		border-radius: 30rpx;
		padding: 8rpx 22rpx;
		margin-left: 10rpx;
	}

	.sure {
		color: #e93323;
		border: 1px solid #e93323;
	}

	.more-operation {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		color: #bbb;
	}

	.b-top {
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-top: 1px solid #f0f0f0
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.1s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
		transform: translateY(-10px);
	}

	.op {
		opacity: 0.5;

	}

	.gray {
		filter: grayscale(100%);
		filter: gray;
	}

	.pic {
		display: flex;
		justify-content: space-between;
	}

	.valid {
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.pay-price {
		color: #E93323;
	}

	.refund {
		text-align: right;
		font-size: 26rpx;
		color: var(--view-theme);
	}
</style>